<template>
  <el-card>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-home">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容区域 -->
    <!-- 表格区域 -->
    <div class="table-box">
      <el-table :data="rightlist" border stripe row-key="id" :tree-props="{children: 'children'}">
        <el-table-column align="center" label="序号" type="index" width="60px"></el-table-column>
        <el-table-column align="center" label="ID" prop="id"></el-table-column>
        <el-table-column prop="authName" align="center" label="权限名称"></el-table-column>
        <el-table-column prop="path" align="center" label="地址"></el-table-column>
        <el-table-column prop="level" align="center" label="层级">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.level == 0" size="small">一级</el-tag>
            <el-tag type="primary" v-if="scope.row.level == 1" size="small">二级</el-tag>
            <el-tag type="success" v-if="scope.row.level == 2" size="small">三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  mounted() {
    if (!this.rightlist.length) {
      this.get_right_list();
    }
  },
  computed: {
    ...mapState({
      rightlist: (state) => state.right.rightlist,
    }), // 权限列表数据
  },
  methods: {
    ...mapActions({
      get_right_list: "right/get_right_list",
    }),
  },
};
</script>

<style lang="less" scoped>
</style>